<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

		<view class="title">
			<text style="font-size: 28px;font-weight: bold;">登录</text>
			<text style="font-size: 16px;margin-top: 12px;">请输入您的账号</text>
		</view>
		<view class="inputBox">
			<u-input class="input" v-model="id" @blur="idEvent" placeholder="请输入账号或邮箱" type="text" border="bottom"
				clearable></u-input>
			<u-input class="input" v-model="password" @blur="passwordEvent" placeholder="请输入密码" :password=isPassword
				border="bottom">
				<template #suffix>
					<u-icon @click="iconClick" :name="passwordIcon" size="28"></u-icon>
				</template>
			</u-input>
		</view>
		<view class="loginButton">
			<u-button type="primary" @click="login" shape="circle" color="#ffce45" size="large" text="登录"></u-button>
		</view>
		<view class="bottom">
			<text @click="register">立即注册</text>
			<u-line color="#000000" length="15px" margin="6px" direction="col"></u-line>
			<text @click="retrievePassword">找回密码</text>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				id: '',
				password: '',
				idFlag: false,
				passwordFlag: false,
				passwordIcon: 'eye-off',
				isPassword: true
			}
		},
		methods: {
			iconClick() {
				if (this.passwordIcon === 'eye-off') {
					this.passwordIcon = 'eye-fill';
					this.isPassword = false;
				} else {
					this.passwordIcon = 'eye-off';
					this.isPassword = true;
				}
			},
			idEvent() {
				//email(支持中文邮箱)
				var reEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				//用户名校验，6到10位（字母，数字，下划线，减号）
				var reId = /^[\w-]{6,20}$/;
				if (reEmail.test(this.id) || reId.test(this.id)) {
					this.idFlag = true;
				} else {
					this.idFlag = false;
					this.$refs.uToast.show({
						position: 'top',
						message: '账号非法',
						type: 'error',
					})
				}
			},
			passwordEvent() {
				//密码校验，6到16位（字母，数字，下划线，减号）
				var re = /^[\w-]{6,20}$/;
				if (re.test(this.password)) {
					this.passwordFlag = true;
				} else {
					this.passwordFlag = false;
					this.$refs.uToast.show({
						position: 'top',
						message: '密码非法',
						type: 'error',
					})
				}
			},
			register() {
				uni.navigateTo({
					url: '/pages/register/register',
				})
			},
			login() {
				if (this.idFlag && this.passwordFlag) {
					uni.showLoading({
						title: '正在登录'
					})
					//登录
					http.post('/login/login', {
						id: this.id,
						password: this.password
					}).then(res => {
						var data = res.data.data;
						uni.hideLoading();
						if (data.code != '200') {
							this.$refs.uToast.show({
								position: 'top',
								message: data.msg,
								type: 'error',
							})
						} else {
							// console.log(data)
							this.$refs.uToast.show({
								position: 'top',
								message: data.msg,
								type: 'success',
							})
							//将必要的数据存到全局变量
							if (data.user.userId) {
								getApp().globalData.isLogin = true;
								getApp().globalData.token = data.token;
							}
							//缓存token
							try {
								uni.setStorageSync('token', data.token);
							} catch (e) {
								// error
								console.log(e);
							}
							//缓存user信息
							try {
								uni.setStorageSync('user', data.user);
							} catch (e) {
								// error
								console.log(e);
							}
							setTimeout(() => {
								//跳转我的页面
								uni.switchTab({
									url: '/pages/tabbar/me/me'
								})
							}, 1500);
						}
					}).catch(err => {
						console.log(err);
					})
				}
			},
			retrievePassword() {
				uni.navigateTo({
					url: '/pages/retrieve-password/retrieve-password'
				})
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		margin: 0 15px 0 15px;
	}

	.title {
		display: flex;
		flex-direction: column;
		margin-top: 15px;
	}

	.inputBox {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.input {
		margin-top: 15px;
	}

	.loginButton {
		margin-top: 50px;
	}

	.bottom {
		display: flex;
		flex-direction: row;
		text-align: center;
		width: 100%;
		justify-content: center;
		align-items: center;
		/* 吸底 */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>